<template>
 <div>
  <!-- 御剑乘风来,除魔天地间!
  <router-view></router-view> -->
  <ul>
    <!-- <li><router-link to='/one?id=1'>第一页</router-link></li> -->
    <li><router-link :to="{name:'one',query:{id:1,name:'小米'}}">第一页</router-link></li>
    <!-- <li><router-link to='/two/2?name=小明'>第二页</router-link></li> -->
    <li><router-link :to="{name:'two',params:{ids:2},query:{name:'小明'}}">第二页</router-link></li>
    <!-- <li><router-link to='/three/3/小李/18'>第三页</router-link></li> -->
    <!-- 编程式导航 -->
    <li @click="btn">第三页</li>
  </ul>
  <router-view></router-view>
 </div>
</template>
<script>
export default{
    data () {
        return {
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
      btn(){
        if(this.$route.fullPath == '/three/3/小李/18') return
        this.$router.push({name:'three',params:{id:3,name:'小李',age:18}}).catch(err=>{})
      }
    }
}
</script>
<style lang='less'  scoped>
    *{
      margin: 0;
      padding: 0;
    }
    .router-link-exact-active{
      background: gold;
    }
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
</style>
